<template>
	<gui-page customHeader headerStyle="" isSwitchPage statusBarStyle="">
		<view slot="gBody" class="gui-padding gui-margin-top">
			<!-- logo -->
			<view class="logo gui-flex gui-nowrap">
				<text class="logo-text">西瓜打印</text>
				<view class="logo-ver">v1.0</view>
			</view>
			<view class="logo-desc">淅川本地打印服务商，支持城区及周边送货上门</view>
			<!-- 横向展示栏 -->
			<view class="gui-margin-top">
				<gui-box-banner :color="['#FFFFFF', '#FFFFFF', '#FFFFFF']" 
				borderColor="#F8F8F8" :fontSize="['32rpx', '22rpx', '22rpx']" background="rgba(255,255,255,0.1)" :items="items"></gui-box-banner>
			</view>
			<!-- 白色内容区域 -->
			<view class="white-body">
				<view class="gui-flex gui-space-between gui-align-items-end">
					<view class="gui-flex gui-align-items-center">
						<view class="gui-title-border"></view>
						<text class="gui-title-text gui-blue">您好!</text>
					</view>
					<text class="gui-text-small gui-color-gray">欢迎使用西瓜打印</text>
				</view>
				<view class="gui-add-list-items gui-flex gui-columns gui-justify-content-center gui-align-items-center"
				 @tap="open()" >
					<text class="gui-add-list-btn-icon gui-block-text gui-color-gray">+</text>
					<text class="gui-add-list-btn-text gui-block-text gui-color-gray">点击 + 选择你要打印的文件吧~~</text>
				</view>
			</view>
			<view class="gui-margin-top gui-bg-gray gui-padding">
				<gui-speaker :items="speakerMsgs" :vertical="true"  :current="1" 
				styles="overflow:hidden; height:60rpx; line-height:60rpx; font-size:28rpx; color:#ED6A0C;">
					<text slot="icon" class="gui-block-text gui-icons demo-icon gui-color-orange" style="width:100rpx;">&#xe656;</text>
				</gui-speaker>
			</view>
			<!-- 居中弹出 -->
			<gui-popup ref="guipopup1">
				<view class="gui-relative gui-box-shadow gui-img-in">
					<gui-image src="../../static/newMemberGift.png" 
					:width="580"></gui-image>
					<!-- 关闭按钮 -->
					<text class="gui-block-text demo-close gui-icons gui-color-white gui-absolute-rt"
					@tap.stop="close1">&#xe78a;</text>
				</view>
			</gui-popup>
		</view>
		
	</gui-page>
</template>

<script>
	let graceJS = require('@/GraceUI5/js/grace.js');
	export default {
		data() {
			return {
				items: [
					['1W', '+', '打印量'],
					['0.3', '', '单面低至0.3元']
				],
				speakerMsgs : [
								{ title: "GraceUI 更快、更好的前端更好的前端更好的前端更好的前端UI", url:"../rechargeItem/rechargeItem", opentype: "switchTab"},
								{ title: "Hcoder.net - 精品 IT 课程中心", url: "../index/index", opentype: "switchTab"}
				],
				actionSheetItems : ['微信中的图片','微信中的文件','从相册中选取','拍照'],
				printList:[]
			}
		},
		onLoad() {
			//换取openID 如果没在数据库中查到结果说明该用户是新用户
			wx.login({
				success:res=>{
					this.$http.request({
						url:'wxapp/getUserByOpenId',
						method:'POST',
						data:{
							code:res.code
						},
						isFactory:false
					}).then(res=>{
						if(res.data.code == 1 ){
							uni.setStorageSync('isNewUser',true)
							
						}else{
							uni.setStorageSync('isNewUser',false)
						}
					}).catch(err=>{
						console.log(err)
					})
				}
			})
			if(uni.getStorageSync('isNewUser')){
				// 演示使用 getRefs 保证等待组件创建完毕在执行后续操作
					graceJS.getRefs('guipopup1', this, 0, (guipopupref)=>{
						guipopupref.open();
					});
					uni.setStorageSync('isNewUser',false)
			}	
		},
		methods: {
			//01 居中弹出
			open1  : function () {this.$refs.guipopup1.open();},
			close1 : function () {this.$refs.guipopup1.close();},
			open : function () {
						//检查用户是否登录
						if(!uni.getStorageSync('isLogin')){
							uni.showToast({
								title:"请先登录",
								mask:true,
								icon:"none"
							})
							setTimeout(function() {
								uni.switchTab({
									url:"../my/uCenter/uCenter"
								})
							}, 1500);
							return false;
						}
						uni.navigateTo({
							url:"../print/print"
						})
					},
		}
	}
</script>
<style>
	page{background-image:linear-gradient(to bottom,#F66867,#f68281); background-repeat:no-repeat; background-size:100% 600rpx;background-color:#F6F7F8;}
	.logo{margin:10rpx 0;}
	.logo-text{font-size:50rpx; color:#FFFFFF; font-weight:bold; opacity:0.88; line-height:60rpx;}
	.logo-ver{font-size:26rpx; color:#FFFFFF; margin-left:16rpx; line-height:38rpx; font-weight:bold; opacity:0.9;}
	.logo-desc{line-height:38rpx; font-size:26rpx; color:#FFFFFF; opacity:.5; margin-top:20rpx;}
	.white-body{width:100%; margin-top:50rpx; background:#FFFFFF; padding:25rpx; box-sizing:border-box; border-radius:10rpx;}
	.gui-title-border{width:8rpx; background:#F66867; margin-right:16rpx; height:28rpx; flex-shrink:0;}
	.gui-add-list-items{ height:400rpx; overflow:hidden; margin:50rpx 9rpx 9rpx 9rpx; background-color:#F8F8F8; font-size:0; position:relative;}
	.gui-add-list-btn-text{font-size:36rpx; line-height:45rpx; text-align:center;}
	.gui-add-list-btn-icon{font-size:120rpx; height:80rpx; line-height:80rpx; margin-bottom:20rpx;}
/* .page-header{
	 background-color:#F66867;
	 height:300rpx;
 } */
 .demo-close{width:100rpx; height:100rpx; line-height:100rpx; opacity:0.88; text-align:center; font-size:58rpx;}
 .demo-lr{flex:1; height:200rpx;}
 .demo-lr-items{height:120rpx; line-height:120rpx; text-align:center; overflow:hidden;}
</style>
